<template>

  <el-table-column v-if="type==undefined" align="center" :label="label" :width="width">
    <template slot-scope="scope">
      <span>{{ scope.row[prop]}}</span>
    </template>
  </el-table-column>

  <el-table-column v-else-if="type=='img'" align="center" :label="label" :width="width">
    <template slot-scope="scope">
      <el-image v-if="scope.row[prop]" :src="scope.row[prop]"
           :width="widthValue"  fit="contain">
      </el-image>
    </template>
  </el-table-column>

  <el-table-column v-else-if="type=='select'&&load==undefined" align="center" :label="label" :width="width">
    <template slot-scope="scope">
      <span v-if="type=='select'&&dataLoaded&&load==undefined">{{initSelectData(scope.row)}}</span>
      <span v-else-if="type=='select'&&load==undefined&&!dataLoaded">{{scope.row[prop]}}</span>
    </template>
  </el-table-column>

  <el-table-column v-else-if="type=='select'" align="center" :label="label" :width="width">
    <template slot-scope="scope">
      <span v-if="type=='select'&&dataLoaded&&load!=undefined">{{initRemoteSelectData(scope.row)}}</span>
      <span v-else-if="type=='select'&&load!=undefined&&!dataLoaded">{{scope.row[prop]}}</span>
    </template>
  </el-table-column>

  <el-table-column v-else-if="type=='cas'" align="center" :label="label" :width="width">
    <template slot-scope="scope">
      <span v-if="type=='cas'&&dataLoaded">{{initCasData(scope.row)}}</span>
      <span v-else-if="type=='cas'&&!dataLoaded">{{scope.row[prop]}}</span>
    </template>
  </el-table-column>

</template>
<script>
  import { fetchList } from '@/api/dict'
  import { setMapStorage, getMapStore } from '@/util/store'
  import { validatenull } from '@/util/validate'
  import { recursiveData, recursiveName, multipleChoice } from '@/util/casUtils'
  import { counterTime } from '@/config/env'

  export default {
    name: 'globalTableColumn',
    props: {
      'prop': undefined,
      'label': '',
      'align': undefined,
      'width': undefined,
      'type': undefined,
      'config': undefined,
      'load': undefined,
      'data': undefined,
      'loading': undefined,
      'height': undefined
    },
    data() {
      return {
        listQuery: {
          page: 1,
          limit: 50,
          module: this.config.module,
          componentName: this.config.componentName,
          fieldName: this.prop
        },
        listRemoteQuery: {
          page: 1,
          limit: 50
        },
        dataMap: {},
        globalValue: undefined,
        globalName: undefined,
        widthValue: this.width,
        heightValue: this.height,
        options: [],
        storageKey: this.config.module + this.config.componentName + this.prop,
        remoteStorageKey: 'remote::' + this.config.module + this.config.componentName + this.prop,
        casStorageKey: 'cas:' + this.config.module + this.config.componentName + this.prop,
        counterStorageKey: 'counter' + this.config.module + this.config.componentName + this.prop,
        dataLoaded: false,
        remoteOptions: [],
        listLoading: this.loading,
        remoteIds: undefined
      }
    },
    created() {
      var isLoad = false
      if (this.widthValue == undefined) {
        this.widthValue = '60px'
      } else {
        if (this.widthValue.indexOf('%') >= 0) {
          console.log('widthValue', this.widthValue)
        } else if (this.widthValue.indexOf('px') >= 0) {

        } else {
          this.widthValue = this.widthValue + 'px'
        }
      }

      if (this.heightValue == undefined) {
        this.heightValue = '60px'
      }

      if (this.type == 'select' && this.load == undefined) {
        this.getRemoteIds()
        var obj = getMapStore(this.storageKey)
        let newObj = JSON.parse(obj)//深度复制对象
        if (validatenull(newObj) || newObj == null) {
          this.getList()
        } else {
          this.dataLoaded = true
          this.getList()
        }
      }

      if (this.type == 'select' && this.load != undefined) {
        this.getRemoteIds()
        var obj = getMapStore(this.remoteStorageKey)
        let newObj = JSON.parse(obj)//深度复制对象
        if (validatenull(newObj) || newObj == null || newObj == undefined) {
          this.getRemoteData()
        } else {
          var remote = newObj[JSON.stringify(this.remoteIds)]
          if (remote != undefined) {
            this.dataLoaded = true
            this.counterPop()
          } else {
            this.getRemoteData()
          }
        }
      }

      if (this.type == 'cas') {
        this.getRemoteIds()
        this.options.push({ 'label': '父级栏目', 'value': '0', 'children': undefined })
        var obj = getMapStore(this.casStorageKey)
        let newObj = JSON.parse(obj)//深度复制对象
        if (validatenull(newObj) || null == newObj) {
          this.getCasData()
        } else {
          this.dataLoaded = true
          //进行延时数据更新缓存
          this.getCasData()
        }
      }

    },
    methods: {
      counterPush() {
        var counter = JSON.parse(getMapStore(this.counterStorageKey))
        if (validatenull(counter) || counter == null || counter == undefined) {
          counter = []
          counter.push(this.counterStorageKey)
          setMapStorage(this.counterStorageKey, counter)
        } else {
          counter.push(this.counterStorageKey)
          setMapStorage(this.counterStorageKey, counter)
        }
      },
      counterPop() {
        if (this.data != undefined) {
          var counter = JSON.parse(getMapStore(this.counterStorageKey))
          if (validatenull(counter) || counter == null || counter == undefined || counter.length == 0) {
            if (this.listLoading) {
              setTimeout(() => {
                this.comesBackLoad(false)
              }, counterTime)
            }

          } else {
            this.listLoading = true
            counter.shift()
            if (counter == null || counter == undefined || counter.length == 0) {
              if (this.listLoading) {
                setTimeout(() => {
                  this.comesBackLoad(false)
                }, counterTime)
              }
            }
            setMapStorage(this.counterStorageKey, counter)
          }
        }

      },
      comesBackLoad(val) {
        this.listLoading = val
        this.$emit('update:loading', this.listLoading)
      },
      getRemoteIds() {
        var ids = []
        if (this.data != undefined && this.data != null && this.data.length != 0) {
          this.data.forEach(d => {
            if (d[this.prop] != undefined) {
              if (ids.indexOf(d[this.prop]) == -1) {
                ids.push(d[this.prop])
              }
            }
          })
          this.comesBackLoad(true)
          this.counterPush()
          this.remoteIds = ids
        } else {
          console.log('父组件请求数据后未执行refreshTable方法')
        }
        this.remoteIds = ids
      },
      initSelectData(val) {

        var label = ''
        var value = val[this.prop]
        var obj = getMapStore(this.storageKey)
        let newObj = JSON.parse(obj)//深度复制对象
        if (validatenull(newObj) || newObj == null) {
          return value
        } else {
          newObj.forEach(d => {

           if ((d.value == "0" || d.value == "1") && (value == true || value == false)) {
               value = value ? 1 : 0
           }

            if (d.value.toString() == value.toString()) {
              label = d.label
            }
          })
          this.dataLoaded = true
        }

        if (label == undefined || label == null || label == '') {
          label = value
        }
        return label
      },
      initRemoteSelectData(val) {
        var label = ''
        var value = val[this.prop]
        if (value == undefined) {
          return value
        }
        var obj = getMapStore(this.remoteStorageKey)
        let newObj = JSON.parse(obj)//深度复制对象
        if (validatenull(newObj) || newObj == null || newObj == undefined) {
          return value
        } else {
          var remote = newObj[JSON.stringify(this.remoteIds)]
          if (remote == undefined) {
            return value
          }
          remote.forEach(d => {
              
          if ((d.value == "0" || d.value == "1") && (value == true || value == false)) {
               value = value ? 1 : 0
           }

            if (d.value.toString() == value.toString()) {
              label = d.label
            }
          })
        }

        if (label == undefined || label == null || label == '') {
          label = value
        }
        return label
      },
      initCasData(val) {
        var label = ''
        var value = val[this.prop]

        if (value == undefined) {
          return 'null'
        }
        var obj = getMapStore(this.casStorageKey)
        let newObj = JSON.parse(obj)//深度复制对象

        if (validatenull(newObj) || newObj == null) {
          label = value
        } else {

          let arr = []
          recursiveName(newObj, arr, value.toString())

          if (arr.length > 0) {
            label = arr[0]
          }
          this.dataLoaded = true
        }
        if (label == undefined || label == null || label == '') {
          label = value
        }

        return label
      },
      getCasData() {
        this.load().then((response) => {
            var data = response.data.data
            if (null != data && data.length > 0) {
              this.options[0].children = data
              setMapStorage(this.casStorageKey, this.options)
            }
            this.counterPop()
            this.dataLoaded = true
          }
        )
      },
      getRemoteData() {
        if (this.remoteIds == null || this.remoteIds == undefined || this.remoteIds.length == 0) {
          this.counterPop()
          return false
        }
        this.listRemoteQuery.value = JSON.stringify(this.remoteIds)
        this.load(this.listRemoteQuery).then((response) => {
          var data = response.data.data
          if (null != data && data.length > 0) {
            var rmoteDate = {}
            rmoteDate[JSON.stringify(this.remoteIds)] = data
            setMapStorage(this.remoteStorageKey, rmoteDate)
          }
          this.counterPop()
          this.dataLoaded = true
        })
      },
      getList() {
        this.listQuery.orderByField = 'create_time'
        this.listQuery.isAsc = false
        this.listQuery.fieldName = this.prop
        this.listQuery.module = JSON.stringify(this.config.module)
        this.listQuery.componentName = JSON.stringify(this.config.componentName)
        fetchList(this.listQuery).then(response => {

          var data = response.data.data.records
          if (data.length > 0) {
            this.options = []
            data.forEach(d => {
              this.options.push({
                value: d.value,
                label: d.name
              })
            })
            setMapStorage(this.storageKey, this.options)
          }
          this.counterPop()
          this.dataLoaded = true
        })
      }
    }
  }
</script>
<style>

</style>
